<template>
    <div id="imglist">
        <el-upload
                class="upload-demo"
                ref="upload"
                :action=actionUrl
                :name="fileList.name"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list=fileList
                :multiple="true"
                :auto-upload="false"
                :before-upload="onBeforeUpload"
        >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                actionUrl: "http://localhost:8080/uploadpicture"
            };
        },

        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            onBeforeUpload(file) {
                const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png';
                const isLt1M = file.size / 1024 / 1024 < 2;

                if (!isIMAGE) {
                    this.$message.error('上传文件只能是图片格式!');
                }
                if (!isLt1M) {
                    this.$message.error('上传文件大小不能超过 4MB!');
                }
                return isIMAGE && isLt1M;
            }
        }
    }
</script>
